<template>
  <div class="discount">
      <div class="discountNavBar">
          <van-nav-bar title="优惠券" left-arrow @click-left="goback">
          </van-nav-bar>
      </div>
      <div class="discountInfo" v-for="(discountTwenty,twenty) in discountTwenty" :key="twenty" @click="gonext">
        <div class="discountLeft">
          <div class="discountPrice">
              <span>{{discountTwenty.price}}</span>
          </div>
          <div class="discountCon">
              <span>{{discountTwenty.con}}</span>
          </div>
        </div>
          <div class="discountRight">
              <div class="discountTitle">
                  <span>{{discountTwenty.title}}</span>
              </div>
              <div class="discountTime">
                  <span>{{discountTwenty.time}}</span>
              </div>
              <div class="discountSource">
                  <span>{{discountTwenty.source}}</span>
              </div>
          </div>
          <div class="sourceBtn">
              <van-button color="#00C657">立即使用</van-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "discount",
    data(){
        return{
            discountTwenty:[
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
            ],
        }
    },
    methods:{
        gonext(){
            this.$router.push({path:'/selectDiscount'})
        },
        goback(){
            this.$router.go(-1)
        },
    }
}
</script>

<style scoped>
.discountInfo{
    display: flex;
    margin-top: 30px;
    margin-left: 12px;
}
.discountLeft{
    width:110px;
    height:100px;
    background:linear-gradient(0deg,rgba(140,83,255,1),rgba(228,100,255,1));
    border-radius:2px;
}
.discountPrice{
    text-align: center;
    margin-top: 25px;
}
.discountPrice span{
    font-size:25px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
}
.discountCon{
    text-align: center;
    margin-top: 12px;
}
.discountCon span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
}
.discountRight{
    margin-left: 20px;
    margin-top: 15px;
}
.discountTitle{

}
.discountTitle span{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:20px;
}
.discountTime{
    margin-top: 15px;
}
.discountTime span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    line-height:20px;
}
.discountSource{
    margin-top: 15px;
}
.discountSource span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    line-height:20px;
}
.sourceBtn{
    margin-top: 34px;
    margin-left: 24px;
}
.sourceBtn button{

}
</style>